<template>
    <div>
        <div class="search">
            <el-input placeholder="请输入内容" v-model="grouponRuleId" clearable size="mini" style="width: 300px"></el-input>
            <el-button type="primary" size="mini" @click="searchfun"><i class="el-icon-search"></i>查找</el-button>
            <el-button type="primary" size="mini" @click="exportToExcel"><i class="el-icon-upload2"></i>导出</el-button>
        </div>
        <div class="table">
            <el-table :data="tableData" highlight-current-row style="width: 100%" border :cell-style="{ fontSize: '13px' }">
                <el-table-column type="expand">
                    <template slot-scope="props">
                        <el-table :data="[props.row]" style="width: 100%">
                            <el-table-column prop="groupon.orderId" label="订单ID" align="center">
                            </el-table-column>
                            <el-table-column prop="groupon.rulesId" label="用户ID" align="center">
                            </el-table-column>
                        </el-table>
                    </template>
                </el-table-column>
                <el-table-column label="订单ID" prop="groupon.orderId" align="center">
                </el-table-column>
                <el-table-column label="用户ID" prop="groupon.rulesId" align="center">
                </el-table-column>
                <el-table-column label="参与人数" prop="groupon.grouponId" align="center"></el-table-column>
                <el-table-column label="团购折扣" prop="rules.discount" align="center"></el-table-column>
                <el-table-column label="团购要求" prop="rules.discountMember" align="center"></el-table-column>
                <el-table-column label="分享图片" prop="rules.picUrl" align="center">
                    <template slot-scope="scope">
                        <img :src="scope.row.rules.picUrl" alt="" style="width: 80px" height="40px" />
                    </template>
                </el-table-column>
                <el-table-column label="开始时间" prop="rules.addTime" align="center"></el-table-column>
                <el-table-column label="结束时间" prop="rules.expireTime" align="center"></el-table-column>
            </el-table>
        </div>
        <div class="solt">
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="page"
                :page-sizes="[10, 20, 30, 40, 50, 100]" :page-size="size"
                layout="total, sizes, prev, pager, next, jumper" :total="total">
            </el-pagination>
        </div>
    </div>
</template>

<script>
import * as XLSX from "xlsx";
import { huodonggetdata } from "@/api/tggl/tghd";
export default {
    data() {
        return {
            // 输入框
            grouponRuleId: "",
            // 表格
            tableData: [],
            // 分页
            page: 1,
            size: 20,
            total: null,
        };
    },
    created() {
        this.getdata();
    },
    methods: {
        // 导出
        exportToExcel() {
            console.log("导出");
            //  自定义表头
            const headers = [
                "订单ID",
                "用户ID",
                "参与人数",
                "团购折扣",
                "团购要求",
                "分享图片",
                "开始时间",
                "结束时间",
            ];
            // 自定义数据
            const data = this.tableData.map((item) => [
                item.groupon.orderId,
                item.groupon.rulesId,
                item.groupon.grouponId,
                item.rules.discount,
                item.rules.discountMember,
                item.rules.picUrl,
                item.rules.addTime,
                item.rules.expireTime,
            ]);
            // 将表头和数据合并
            const worksheetData = [headers, ...data];
            // 将表头转换为工作表
            const worksheet = XLSX.utils.aoa_to_sheet(worksheetData);
            // 创建工作薄并导出
            const workbook = XLSX.utils.book_new();
            XLSX.utils.book_append_sheet(workbook, worksheet, "Sheet1");
            XLSX.writeFile(workbook, "团购活动.xlsx");
        },
        // 查找
        searchfun() {
            this.getdata();
        },
        // 分页
        handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
            this.size = val;
            this.getdata();
        },
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
            this.page = val;
            this.getdata();
        },
        // 获取数据
        getdata() {
            huodonggetdata({
                page: this.page,
                limit: this.size,
                sort: "add_time",
                order: "desc",
                grouponRuleId: this.grouponRuleId,
            })
                .then((res) => {
                    console.log(res);
                    if (res.errno === 0) {
                        this.tableData = res.data.list;
                        this.total = res.data.total;
                    }
                })
                .catch((err) => {
                    console.log(err);
                });
        },
    },
};
</script>

<style scoped lang="scss">
.search {
    margin-top: 20px;
    margin-left: 20px;
}

.table {
    margin-top: 20px;
    margin-left: 20px;
}

.solt {
    margin-top: 20px;
    margin-left: 20px;
}

.demo-table-expand {
    font-size: 0;
}

.demo-table-expand label {
    width: 90px;
    color: #99a9bf;
}

.demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 50%;
}

.el-table ::v-deep {
    .el-table__expanded-cell {
        padding: 0px;
    }
}
</style>